<template>
  <div class="page-container-padding">
    <el-tabs v-model="curTabName">
      <el-tab-pane name="manage" label="数据管理" size="mini">
        <div style="display: flex; align-items: center">
          <el-select v-model="manageData.symbol" size="mini">
            <el-option
              v-for="b in bondList"
              :key="b.code"
              :value="b.code"
              :label="b.name"
            />
          </el-select>
          <el-button
            type="primary"
            size="mini"
            style="margin-left: 8px"
            @click="getBondCandle"
          >
            查询
          </el-button>
        </div>
        <div style="margin-top: 16px">
          <el-table border stripe :data="manageData.dataList">
            <el-table-column prop="id" label="ID" width="80" />
            <el-table-column prop="time" label="日期" />
            <el-table-column prop="code" label="代码" />
            <el-table-column prop="open" label="开盘价" />
            <el-table-column prop="high" label="最高价" />
            <el-table-column prop="low" label="最低价" />
            <el-table-column prop="close" label="收盘价" />
          </el-table>
        </div>
        <div>
          <el-pagination
            background
            hide-on-single-page
            layout="total, prev, pager, next, jumper"
            :current-page="manageData.page"
            :page-size="manageData.pageSize"
            :total="manageData.totalCount"
            @current-change="managePageChanged"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane name="create" label="添加">
        <div style="display: flex; align-items: center">
          <el-select
            v-model="createData.symbol"
            clearable
            placeholder="全部"
            size="mini"
          >
            <el-option
              v-for="b in bondList"
              :key="b.code"
              :value="b.code"
              :label="b.name"
            />
          </el-select>
          <el-date-picker
            v-model="createData.dateRange"
            type="daterange"
            size="mini"
            style="margin-left: 8px"
          />
          <el-button
            type="primary"
            size="mini"
            style="margin-left: 8px"
            @click="toGetBondQuote"
          >
            获取
          </el-button>
          <el-button
            type="success"
            size="mini"
            style="margin-left: 8px"
            @click="toSaveQuotes"
          >
            保存
          </el-button>
        </div>
        <div style="margin-top: 16px">
          <el-table border stripe :data="createData.dataList">
            <el-table-column prop="time" label="日期" />
            <el-table-column prop="code" label="代码" />
            <el-table-column prop="open" label="开盘价" />
            <el-table-column prop="high" label="最高价" />
            <el-table-column prop="low" label="最低价" />
            <el-table-column prop="close" label="收盘价" />
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  import { datetimeToStr } from '@/utils/datetimeUtils'
  import {
    RetrieveBondCandle,
    GetBondCandleQuote,
    SaveBondCandleQuote,
  } from '@/api/adminRuizhi/dailyMaintain'
  export default {
    data() {
      return {
        bondList: [
          {
            code: '000001.SH',
            name: '上证指数',
          },
          {
            code: '399001.SZ',
            name: '深证成指',
          },
          {
            code: 'IFZL.CFE',
            name: '沪深300',
          },
          {
            code: 'IHZL.CFE',
            name: '上证50',
          },
          {
            code: 'ICZL.CFE',
            name: '中证500',
          },
          {
            code: 'IMZL.CFE',
            name: '中证1000',
          },
        ],
        curTabName: 'manage',
        manageData: {
          symbol: '000001.SH',
          page: 1,
          pageSize: 30,
          totalCount: 0,
          dataList: [],
        },

        createData: {
          symbol: null,
          dateRange: [
            new Date(new Date().getTime() - 24 * 60 * 60 * 1000),
            new Date(),
          ],
          dataList: [],
        },
      }
    },
    mounted() {},
    methods: {
      getBondCandle() {
        RetrieveBondCandle(
          this.manageData.symbol,
          this.manageData.page,
          this.manageData.pageSize
        ).then((res) => {
          this.manageData.dataList = res.data.rows
          this.manageData.totalCount = res.data.total_count
        })
      },
      // 获取证券的日k
      toGetBondQuote() {
        let symbols = ''
        if (!this.createData.symbol) {
          let tmp_symbols = []
          for (let i = 0; i < this.bondList.length; i++) {
            tmp_symbols.push(this.bondList[i].code)
          }
          symbols = tmp_symbols.join(',')
        } else {
          symbols = this.createData.symbol
        }
        GetBondCandleQuote(
          symbols,
          datetimeToStr(this.createData.dateRange[0], true, ''),
          datetimeToStr(this.createData.dateRange[1], true, '')
        ).then((res) => {
          const resData = res.data.data
          let quoteData = []
          for (let k in resData) {
            const values = resData[k]
            quoteData = [...quoteData, ...values]
          }
          console.log(quoteData)
          this.createData.dataList = quoteData
        })
      },

      managePageChanged(page) {
        this.manageData.page = page
        this.getBondCandle()
      },

      // 保存数据
      toSaveQuotes() {
        if (this.createData.dataList.length < 1) {
          this.$baseMessage('先获取数据再保存.', 'error')
          return
        }
        SaveBondCandleQuote(this.createData.dataList).then((res) => {
          this.$baseMessage(res.message, 'success')
          this.createData.dataList = []
        })
      },
    },
  }
</script>
<style scoped lang="scss"></style>
